import { DiamondNode, DiamondNodeModel, h } from '@logicflow/core';
class SquareModel extends DiamondNodeModel {

 setAttributes() {
  const size = 80;


  // this.width = size;
  this.size = size;
  // this.anchorsOffset = [
  //  [size / 2, 0],
  //  [-size / 2, 0]
  // ];

  // const circleOnlyAsTarget = {
  //  message: "正方形节点下一个节点只能是圆形节点",
  //  validate: (source, target) => {
  //   return target.type === "circle";
  //  },
  // };

  // this.width = 200;
  // this.height = 50;
  // this.radius = 10;
  // this.rx = 10;
  // this.ry = 10;
  // this.anchorsOffset = [
  //  [200 / 2, 0],
  //  [-50 / 2, 0]
  // ];
  // this.sourceRules.push(circleOnlyAsTarget);
 }
  getTextStyle(){
   const { refX = 0, refY = 0 } = this.properties 
   const style = super.getTextStyle();

   // 通过 transform 重新设置 text 的位置：向下移动70px
   return {
     ...style,
     // transform: `matrix(1 0 0 1 ${refX} ${refY})`,
     transform: `matrix(1 0 0 1 ${refX} ${refY + 60})`,
   };
 }
}
class SquareView extends DiamondNode {
 getShape() {
  // 通过 getAttributes 获取 model 中的属性
  const { x, y, fill = '#ffffff', radius, width = 200, rx, ry, height = 50, stroke = 'rgb(0, 0, 0)', strokeWidth = 2 } = this.props.model;

  // console.log(this);
  const halfWidth = width / 2;
  const halfHeight = height / 2;

  // 菱形的四个顶点坐标
  const points = [
   x - halfWidth, y, // 左上
   x, y - halfHeight, // 顶部
   x + halfWidth, y, // 右上
   x, y + halfHeight, // 底部
  ];

  const attrs = {
   // rect 标签的 x，y 对应的是图形的左上角
   // 所以我们要将矩形的中心移动到 x，y
   x: x - width / 2,
   y: y - height / 2,
   width,
   height,
   stroke,
   fill,
   strokeWidth,
   points: points.join(' '),
   // radius, rx, ry,
  }
  // getShape 的返回值是一个通过 h 方法创建的 svg 元素
  return h("g", {}, [
   h("polygon", { ...attrs }),
   h(
    'svg',
    {
     x: x - width / 2 + 5,
     y: y - height / 2 + 20,
     width: 60,
     height: 60,
     viewBox: "0 0 1274 1024",
    },
    h(
     'path',
     {
      fill: stroke,
      d:
       "M286.165333 798.165333L512 572.330667l225.834667 225.834666 60.330666-60.330666L572.330667 512l225.834666-225.834667-60.330666-60.330666L512 451.669333 286.165333 225.834667 225.834667 286.165333 451.669333 512l-225.834666 225.834667z",
     }
    )
   )
  ]
  );
 }
}
export default {
 type: 'custom-diamon',
 view: SquareView,
 model: SquareModel,
};

export const apiNode = {
 id: 'api',
 type: 'custom-diamon',
 x: 1300,
 y: 250,
 text: {
  x: 1300,
  y: 250,
  value: 'api-node'
 },
 properties: {
  style: {
   fill: '#f0f0f0',
   stroke: '#000',
  },
  fontSize: 12

 },
}
